<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>11 事件目标</title>
		<style type="text/css">
			.item {
				width: 100px;
				height: 80px;
				background-color: lightblue;
				margin: 50px 10px;
			}
		</style>
	</head>
	<body>
		<ul id="box">
			<li class="item">1</li>
			<li class="item">2</li>
		</ul>
		<script type="text/javascript">
			// currentTarget    target和srcElement
			var box = document.getElementById('box');
			// 1.currentTarget属性返回事件当前所在的节点,正在执行的监听函数所绑定的节点
			/* box.onclick = function (e){
				e =  e || window.event;
				// console.log(e);
				console.log(e.currentTarget);
				var items = document.getElementsByTagName('li');
				items[0].innerHTML = e.currentTarget;
				
			} */

			// 2.target属性返回的是事件的实际目标对象
			// 注意：target属性 ie8不支持
			/* box.onclick = function (e){
				e =  e || window.event;
				console.log(e.target);
				console.log(e.target===this);
				
				// this对象跟e.currentTarget属性是一致的
				console.log(e.currentTarget===this);

				
			} */
			
			// 3.srcElement跟target功能是一致的,FF低版本的浏览器不支持
			box.onclick = function(e) {
				e = e || window.event;
				var target = e.target || e.srcElement;
				target.style.backgroundColor = 'red';

			}
			box.onmouseout = function(e) {
				e = e || window.event;
				var target = e.target || e.srcElement;
				target.style.backgroundColor = 'lightblue';
			
			}
		</script>
	</body>
</html>
